<template>
  <div class="html_details">
    <Repl
      v-if="load"
      style="width: 100%"
      :editor="Monaco"
      :store="store"
      :theme="theme"
      @keydown.ctrl.s.prevent
      @keydown.meta.s.prevent
      layout="horizontal"
      :layoutReverse="true" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { Repl, ReplStore, useStore, File } from "@vue/repl";
import Monaco from "@vue/repl/monaco-editor";
import { useAllFiles } from "@/store/allFiles";
const route = useRoute(); // 获取当前路由对象
let info = computed(() => {
  return JSON.parse(route.query.info as string);
});

const fileStore = useAllFiles();
let files = fileStore.searchFileByName({ name: info.value.name, type: info.value.type });
let rootCode = ref(""); // 主模板
let otherCode = ref<any[]>([]);
let store: ReplStore | undefined = undefined;
let load = ref<boolean>(false);
let theme = ref<"dark" | "light" | undefined>("dark");
const newSFCCode = `<template>
  <div><\/div>
<\/template>

<script>
export default {
  data() {
    return {};
  },
};
<\/script>

<style scoped><\/style>
`;
const getInfo = async () => {
  let rootFile = files.find((e) => e.isRoot);
  rootCode.value = (await rootFile?.moduleToString()) as string;
  let other = files.filter((item) => !item.isRoot) || [];
  otherCode.value = await Promise.all(
    other.map(async (item: any) => {
      return {
        entirely: item.entirely,
        name: item.fileNameEntirely,
        code: (await item?.moduleToString()) as string,
      };
    })
  );
  setStore();
};
getInfo();

const setStore = () => {
  let files = ref<any>({});
  let imports: any = {};
  files.value[`src/Index.vue`] = rootCode.value;
  for (let i of otherCode.value) {
    if (i.entirely === "json") {
      imports = JSON.parse(i.code);
    } else {
      files.value[`src/${i.name}`] = ref<File>(new File(`src/${i.name}`, i.code));
    }
  }
  store = useStore({
    files: files,
    activeFilename: ref("src/Index.vue"),
    mainFile: ref("src/Index.vue"),
    template: ref({
      welcomeSFC: rootCode.value,
      newSFC: newSFCCode,
    }),
  });
  store.setFiles({
    ...store.getFiles(),
    "import-map.json": JSON.stringify(
      {
        imports,
      },
      null,
      2
    ),
  });
  load.value = true;
};

watch(
  () => info.value,
  (newValue) => {
    load.value = false;
    files = fileStore.searchFileByName({ name: newValue.name, type: newValue.type });
    getInfo();
  }
);
</script>

<style lang="scss" scoped>
.html_details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .left,
  .rigth {
    width: 50%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  .left iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 20px 20px 26px #cacaca, -20px -20px 26px #f6f6f6;
    overflow: hidden;
  }
}
</style>
